<template>
	<el-row style="margin-bottom: 20px;">
		<el-input placeholder="用户名" v-model="query" style="width: 200px;margin-right: 10px;" />
		<el-button @click="getList">查询</el-button>
	</el-row>
	<el-table class="table" :data="tableData" style="width: 100%" row-key="id" border>
		<el-table-column prop="id" label="id"  width="50"/>
		<el-table-column label="评论人">
			<template #default="scope">
				<img :src="scope.row.head_photo" alt="" />
				<span>{{ scope.row.real_name }}</span>
			</template>
		</el-table-column>
		<el-table-column label="评论内容">
			<template #default="scope">
				<span v-html="scope.row.content"></span>
			</template>
		</el-table-column>
		<el-table-column prop="user_name" label="评论用户" />
		<el-table-column prop="user_id" label="评论用户id" />
		<el-table-column prop="for_name" label="@用户" />
		<el-table-column prop="for_id" label="@用户id" />
		<el-table-column prop="like" label="点赞数" />
		<el-table-column  label="评论时间" width="170">
			<template #default="scope">
				{{  moment(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') }}
			</template>
		</el-table-column>
		<el-table-column fixed="right" label="操作" width="60">
			<template #default="scope">
				<el-button link type="primary" size="small" @click.prevent="handleDelete(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="pagination"><el-pagination background @current-change="currentChange" layout="prev, pager, next" :total="total"></el-pagination></div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { getCurrentInstance, ref } from 'vue';
import moment from 'moment'
const { proxy } = getCurrentInstance();
const query = ref('');
const tableData = ref([]);

const page = ref(1);
const total = ref(0);
//初始化获取数据
getList();
function getList() {
	proxy
		.$get('/comment/all', {
			query: query.value,
			page:page.value
		})
		.then(res => {
			console.log(res);
			if (res.code === 200) {
				total.value = res.data.total;
				tableData.value = res.data.list;
			}
		});
}

function handleDelete(id) {
	ElMessageBox.confirm('是否确定删除该评论', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			proxy.$post('/comment/delete', { id }).then(res => {
				if (res.code === 200) {
					ElMessage({
						type: 'success',
						message: '删除成功'
					});
					getList();
				} else {
					ElMessage.error(res.msg);
				}
			});
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除'
			});
		});
}
function currentChange(e) {
	page.value = e;
	getList();
}

</script>

<style scoped lang="less">
.pagination {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}
.table {
	img {
		width: 30px;
		height: 30px;
		object-fit: cover;
		border-radius: 5px;
		margin-right: 5px;
	}
}
</style>
